<template>
    <div>
        <div class="rowOne">
            <p class="oneP">美辰二类电商行业营销优势</p>
            <p class="twoP" style="font-weight:100">以尽可能低的成本获取更高质量的营销效果</p>
            <button class="oneButton" @click.stop="consult">免费咨询</button>
        </div>
        <div class="fluid">
            <div class="container">
                <ul class="ulOne">
                    <li v-for="(item,index) in one" :key="index">
                        <div class="ulTwo" @mouseover="show(index)">
                            <img :src="item[0]">
                            <p>{{item[1]}}</p>
                            <p>{{item[2]}}</p>
                        </div>
                        <!-- 白色色背景 -->
                        <div class="ulThree" v-if="redIndex==index">
                            <div><img :src="item[3]"></div>
                            <img src="../../assets/img/二类电商/免费咨询/circle.png">
                            <p>{{item[1]}}</p>
                            <p>{{item[2]}}</p>                 
                        </div>
                    </li>         
                </ul>
             </div>
        </div>
    </div>
</template>
<script>
const img1 = require("../../assets/img/二类电商/免费咨询/01.png")
const img2 = require("../../assets/img/二类电商/免费咨询/02.png")
const img3 = require("../../assets/img/二类电商/免费咨询/03.png")
const img4 = require("../../assets/img/二类电商/免费咨询/04.png")
const img5 = require("../../assets/img/二类电商/免费咨询/05.png")
const img6 = require("../../assets/img/二类电商/免费咨询/001.png")
const img7 = require("../../assets/img/二类电商/免费咨询/002.png")
const img8 = require("../../assets/img/二类电商/免费咨询/003.png")
const img9 = require("../../assets/img/二类电商/免费咨询/004.png")
const img10 = require("../../assets/img/二类电商/免费咨询/005.png")
import bus from '../../utils/bus'
export default {
    data() {
        return {
        one: [
            [img1,"提升电商品牌形象与知名度","",img6],
            [img2,"增加客户粘度","脱离价格战泥沼",img7],
            [img3,"提高客户转化率","提升广告性价比",img8],
            [img4,"实施媒体舆情监测","优化投放渠道",img9],
            [img5,"降低电商运营成本","营销更精准",img10]

        ],
        redIndex : 0,
        }
  },
  methods: {
    show(index) {
        this.redIndex = index
    },
    consult(){
        bus.$emit('showConsult', true);
    }
  },
  mounted(){
    this.$el.addEventListener('click', () => {
        bus.$emit('showConsult', false)
    })
  } 
}
</script>
<style scoped>
.fluid{
    width: 100%;
    height: 300px;
    background: url("../../assets/img/二类电商/免费咨询/bg1.png");
    margin-top: 60px;
    overflow: hidden;
}
.rowOne{
    width: 1200px;
    margin:0 auto;
    margin-top: 80px;
    text-align: center;
}
.container{
    width:1200px;
    margin:0 auto;
}
.ulOne p{
    font-size: 16px;
}
.ulOne>li {
    /* 240 */
  width: 20%;
  float: left;
  height: 300px;
  text-align: center;
  position: relative;
}
.ulTwo {
  width: 100%;
  height:300px;
  text-align: center;
}
.ulTwo p{
    color:#fff;
}
.ulTwo>img{
    margin-top: 84px;
}
.ulTwo>p:nth-child(2){
    margin-top: 38px;
}
.ulThree {
  width: 100%;
  height:334px;
  background: url("../../assets/img/二类电商/免费咨询/bg2.png") center;
  position: absolute;
  top: -14px;
  left: 0;
  text-align: center;
}
.ulThree p{
    font-weight: bold;
}
.ulThree>div>img{
    margin-top: 69px;
}
.ulThree>img:nth-child(2){
    margin-top: 39px;
}
.ulThree>p:nth-child(3){
    margin-top: 39px;
}

.oneButton {
    box-shadow: 0px 4px 19px #ed9191;
}
</style>


